<!-- 能管办公管理-能耗数据上报 -->
<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue'
import type { FormInstance, MessageBoxData } from 'element-plus'
import type { EnergyType } from './type'
import { comObj } from './'
import type { CustomDialogInstance, TableColumn } from '@/types'

// ------------------use------------------
// #region
const { $confirm } = useCurrentInstance()
const { withLoading, loading } = useDefineLoading()
const [tableData, setTableData] = useState<any[]>([])
const [isFullscreenDialog, setIsFullscreenDialog]
  = useState<boolean>(false)
const [type, setType] = useState<EnergyType>('electric')
setType('electric')
// #endregion
// ------------------静态变量------------------
// #region
const columns: TableColumn<any>[] = [
  {
    key: uuid(),
    type: 'index',
    width: '80',
    label: '序号',
  },
  {
    key: uuid(),
    label: '报表名称',
    render() {
      return '能耗报表'
    },
  },
  {
    key: uuid(),
    label: '能源类型',
    render() {
      return '电'
    },
  },
]
const formRules = generateCurrencyFormRules(['dataTime'])
console.log(formRules)

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const dialogRef = ref<CustomDialogInstance | null>(null)
const formRef = ref<FormInstance | null>(null)
const dataTime = ref<string>('')
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region
// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  await withLoading(sleep)(100)
  setTableData(Array.from({ length: 1 }).fill({}))
}
async function showDateSelectDialog() {
  dialogRef.value?.open?.()
  await nextTick()
  dialogRef.value?.setSaving?.(false)
  formRef.value?.resetFields()
}
async function dateSelectConfirm() {
  const isValid = await formRef.value?.validate()
  if (!isValid) {
    dialogRef.value?.setSaving?.(false)
    return
  }
  dialogRef.value?.close?.()
  setIsFullscreenDialog(true)
}
async function clickBack() {
  const isValid: MessageBoxData = await $confirm(
    '报表可能未保存，确定返回?',
    '警告',
    {
      type: 'warning',
    },
  )
  if (isValid !== 'confirm')
    return
  setIsFullscreenDialog(false)
}
// #endregion
</script>

<template>
  <div
    class="padding-sm flex-direction relative flex align-end container"
  >
    <view-table
      :loading="loading"
      :columns="columns"
      :data="tableData"
      :show-toolbox="false"
      operate-width="140"
    >
      <template #operate>
        <TdButton
          title="填报"
          :icon="Edit"
          :disabled="!$power('edit')"
          type="primary"
          @click="showDateSelectDialog"
        />
      </template>
    </view-table>
    <FullscreenModal v-model="isFullscreenDialog">
      <component
        :is="comObj[type]?.render?.()"
        :data-time="dataTime"
      >
        <template #title="{ saveStage, download, time }">
          <ElPageHeader title="返回" @back="clickBack">
            <template #content>
              <span>
                {{
                  (time as string).replace(
                    /^(\d+)-(\d+)$/g,
                    '$1年$2月份',
                  )
                }}天飞有限责任有限公司电量（费）核减情况表
              </span>
            </template>
            <template #extra>
              <div class="align-center flex">
                <ElButton
                  :disabled="!$power('edit')"
                  type="primary"
                  @click="saveStage"
                >
                  保存
                </ElButton>
                <ElButton type="primary" @click="download">
                  导出文件
                </ElButton>
              </div>
            </template>
          </ElPageHeader>
        </template>
      </component>
    </FullscreenModal>
    <CustomDialog
      ref="dialogRef"
      title="请选择填报时间"
      @confirm="dateSelectConfirm"
    >
      <el-form
        ref="formRef"
        label-width="50px"
        label-position="right"
        :model="{ dataTime }"
        :rules="formRules"
        inline
      >
        <el-form-item
          label="时间"
          prop="dataTime"
          class="width-fill"
        >
          <el-date-picker
            v-model="dataTime"
            value-format="YYYY-MM"
            type="month"
            placeholder="请选择月份"
          />
        </el-form-item>
      </el-form>
    </CustomDialog>
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
